import React from "react";
import { Button, Form, Input, Table, Tag, Space, Card } from "antd";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";

import style from "./hospitalSet.module.css";

export default function HospitalSet() {
  //colums是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
  //render函数的第三个参数是当前的数据的下标
  //正常要求columns中要有key 但是如果书写了dataIndex 则可以省略key
  const columns = [
    {
      title: "序号",
      width: 60,
      dataIndex: "index",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      width: 120,
      fixed: "right" as "right",
      dataIndex: "do",
      render() {
        return (
          <div>
            <Button
              type="primary"
              icon={<EditOutlined />}
              className={style.mr}
            ></Button>
            <Button type="primary" danger icon={<DeleteOutlined />}></Button>
          </div>
        );
      },
    },
  ];

  //data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
  const data = [
    {
      id: 10,
      createTime: "2022-04-11 16:41:18",
      updateTime: "2022-06-15 08:22:30",
      isDeleted: 0,
      param: {},
      hosname: "北京大学深圳医院",
      hoscode: "2022222",
      apiUrl: "http://api.bjdxszyy.cn",
      signKey: "62b84e910bd6d7b67157aed66e7aa866",
      contactsName: "隔壁老王",
      contactsPhone: "13000000000",
      status: 0,
    },
    {
      id: 9,
      createTime: "2022-01-18 10:53:14",
      updateTime: "2022-06-15 08:22:29",
      isDeleted: 0,
      param: {},
      hosname: "民航总医院",
      hoscode: "1000_8",
      apiUrl: "http://api.mzyy.cn",
      signKey: "6f8006485dca34cd5849b724981dbe99",
      contactsName: "周全",
      contactsPhone: "15745634567",
      status: 1,
    },
    {
      id: 8,
      createTime: "2022-01-18 10:53:10",
      updateTime: "2022-06-15 08:22:27",
      isDeleted: 0,
      param: {},
      hosname: "北京市海淀区同步中医骨科医院",
      hoscode: "1000_7",
      apiUrl: "http://api.hdqtb.cn",
      signKey: "6f8006485dca34cd5849b724981dbe99",
      contactsName: "王伟",
      contactsPhone: "13134564567",
      status: 0,
    },
  ];
  return (
    <div className={style.outer}>
      <Card>
        <Form name="basic" wrapperCol={{ span: 30 }} layout="inline">
          <Form.Item name="username">
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item name="password">
            <Input placeholder="医院编号" />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset">
              清空
            </Button>
          </Form.Item>
        </Form>
        <div className={style.mt}>
          <Button type="primary" className={style.mr}>
            添加
          </Button>
          <Button type="primary" danger disabled>
            批量删除
          </Button>
        </div>

        <Table
          className={style.mt}
          columns={columns}
          dataSource={data}
          scroll={{ x: 1100 }}
          bordered
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="hoscode"
          pagination={{
            //页码的配置：当前页码
            current: 2,
            //总数据的数量
            total: 10,
            //每页条数
            pageSize: 3,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [2, 3, 4, 5],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,
          }}
        />
      </Card>
    </div>
  );
}
